<template>
  <div class="footer-comp">
    <label>
      <input type="checkbox" :checked="isFull" @change="fullStateHandler">
      全选
    </label>
    <span>合计: ${{total}}</span>
    <button class="footer-pay">去支付({{totalNum}})</button>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';

  @Component({name: 'Footer'})
  export default class Footer extends Vue{
      /* props */
      @Prop({default: false}) private isFull!: boolean;
      @Prop({default: 0}) private total!: number;
      @Prop({default: 0}) private totalNum!: number;

      //切换全选勾选状态处理函数
      fullStateHandler(e: any) {
        this.$emit('fullStateEvent', e.target.checked);
      }
  };
</script>

<style scoped lang="less">
  .footer-comp {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
  }
  span {
    margin-right: 10px;
  }
  .footer-pay {
    border-radius: 14px;
    background-color: cornflowerblue;
    color: #fff;
    width: 100px;
    height: 28px;
  }
</style>
